<template>
	<view>
       <view class="header_top px-2 d-flex j-sb">
		    <view class="d-flex a-center" @click="indexList">
		    	<image class="img" src="../../../static/home/01.png" mode=""></image>
		    	<text class="txt">{{city}}</text>
		    	<text class="iconfont icon-arrow-down"></text>
		    </view>
			
			<view class="d-flex a-center">
				<image  class="img mr-2" src="../../../static/home/02.png" mode=""></image>
				<image class="img" src="../../../static/home/03.png" mode=""></image>
			</view>
       </view>
	   <view class="banner">
	   	   <u-swiper  height='240' :list="list"></u-swiper>
	   </view>
	   <view class="data-cls px-4">
	   	  <view class="row">
	   	  	<image class="img" src="../../../static/home/04.png" mode=""></image>
			<text class="txt">特惠加油</text>
	   	  </view>
		  <view class="row">
		  	<image class="img" src="../../../static/home/05.png" mode=""></image>
		  	<text class="txt">车主服务</text>
		  </view>
		  <view class="row">
		  	<image class="img" src="../../../static/home/06.png" mode=""></image>
		  	<text class="txt">优惠中心</text>
		  </view>
		  <view class="row">
		  	<image class="img" src="../../../static/home/07.png" mode=""></image>
		  	<text class="txt">车检指南</text>
		  </view>
	   </view>
      <!-- 车检服务 -->
       <view class="data-title">
       	  <text>车检服务</text>
       </view>
	   
       <view class="data-other">
		<image @click="goDeatil(1)" class="img" src="../../../static/home/08.png" mode=""></image>
		<image @click="goDeatil(2)" class="img" src="../../../static/home/09.png" mode=""></image>
       	<image @click="goDeatil(3)" class="img" src="../../../static/home/010.png" mode=""></image>
       </view>
	   <view class="data-weather">
	   	  <image class="img" src="../../../static/home/011.png" mode=""></image>
		  <text class="ml-3 font-sm">{{weather}}</text>
	   </view>
	   <view class="data-title">
	   	  <text>最新咨询</text>
		  <text class="more">查看更多</text>
	   </view>
	   <view class="data-info">
	   	<view class="">
	   		<image class="imgs" src="https://cdn.uviewui.com/uview/swiper/2.jpg" mode=""></image>
	   		<image class="imgt" src="../../../static/home/012.jpg" mode=""></image>
	   		<view class="info-content">一部门稳定扩大汽车消费，买车、卖车都有福利！</view>
	   	</view>
		<view class="info-txt">
			<view class="txte mr-2">
				内容
			</view>
			<view class="txts">
			  <text>在新冠肺炎疫情席卷全球之际，外需受阻，实施扩大内需战略是稳住经济基本盘的重要支撑</text>
			</view>
		</view>
	   </view>
	   <view class="data-title">
	   	  <text>推荐车检站</text>
	   </view>
	   <view @click="goDeatil(4)" class="data-footer">
		   <view class="data-detail">
		   	 查看详情
		   </view>
	   	  <image class="f_img"  src="https://cdn.uviewui.com/uview/swiper/2.jpg" mode=""></image>
		  <view class="txt">
		  	合肥通顺机动车辆检测中心
		  </view>
	   </view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				list:[
					{
					image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
				]
			}
		},
		computed:{
			city(){
				return this.$store.state.allocation.city
			},
			weather(){
				return this.$store.state.allocation.weather
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods:{
			goDeatil(num){
				if(num==2){
					uni.navigateTo({url:'./generation/index'})
				}else if(num==3){
					uni.navigateTo({url:'./applyGen/index'})
				}else if(num == 1){
					uni.navigateTo({url:'./selfDriving/index'})
				}else if(num == 4){
					uni.navigateTo({url:'./detail'})
				}
			},
			indexList(){
				uni.navigateTo({
					url:'/pages/pagesB/indexlist/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 180rpx;
	}
	
  .header_top{
	  width: 100%;
	  height: 80rpx;
	  .img{
		  width: 38rpx;
		  height: 38rpx;
	  }
  }
  .banner{
	  height: 240rpx;
	  width: 700rpx;
	  margin:  0 auto;
	  // border-radius: 130rpx;
  }
  .data-cls{
	  width: 100%;
	  height: 200rpx;
	  // border: 1px solid #CCCCCC;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  .row{
		  height: 100rpx;
		  width: 140rpx;
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		  .img{
			  height: 72rpx;
			  width: 72rpx;
		  }
		  .txt{
			  font-size: 35rpx;
			  font-weight: bold;
		  }
	  }
  }
  .data-title{
	  width: 700rpx;
	  height: 40rpx;
      font-size: 35rpx;
      font-weight: bold;
	  border-left: 3px solid #007BFF;
	  padding-left: 20rpx;
	  line-height: 40rpx;
	  margin:  40rpx auto;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  .more{
		  font-size: 24rpx;
		  color: #CCCCCC;
	  }
  }
  .data-other{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 0 20rpx;
	  .img{
		  width: 228rpx;
		  height: 228rpx;
	  }
  }
  .data-weather{
	  width: 700rpx;
	  height: 100rpx;
	  border-radius: 30rpx;
	  background-color: #f4f5ff;
	  margin: 20rpx auto;
	  display: flex;
	  align-items: center;
	  // justify-content: center;
	  padding: 0 20rpx;
	  .img{
		  width: 62rpx;
		  height: 62rpx;
	  }
  }
  
  .data-info{
	  width: 700rpx;
	  height: 350rpx;
	  border-bottom: 1px solid #f5f6f7;
	  margin: 0 auto;
	  position: relative;
	  .imgs{
		  width: 700rpx;
		  height: 200rpx;
	  }
	  .imgt{
		  width: 100rpx;
		  height: 40rpx;
		  border-radius: 10rpx;
		  position: absolute;
		  left: 20rpx;
		  top: 120rpx;
		  z-index: 2;
	  }
	  .info-content{
		  width: 100%;
		  position: absolute;
		  top: 150rpx;
		  z-index: 9;
		  color: #FFFFFF;
		  font-size: 30rpx;
		  font-weight: bold;
		  text-align: center;
	  }
	  .info-txt{
		  position: relative;
		  width: 100%;
		  height: 100rpx;
		  font-size: 30rpx;
		  font-weight: bold;
		  display: flex;
		  align-items: center;
		  padding-left: 20rpx;
		  .txte{
			  width: 80rpx;
			  height: 40rpx;
			  color: #0372ff;
			  background: #f5f6ff;
			  font-size: 25rpx;
			  text-align: center;
			  border-radius: 15rpx;
			  margin-bottom: 40rpx;
		  }
		 .txts{
			 width: 600rpx;
		 }
	  }
  }
  
  .data-footer{
	  position: relative;
	  width: 700rpx;
	  height: 380rpx;
	  margin: 0 auto;
	  border-radius:20rpx;
	  .f_img{
		width: 700rpx;
		height: 320rpx;
		border-radius:20rpx;
	  }
	  .data-detail{
		  position: absolute;
		  top: 20rpx;
		  right: 20rpx;
		  z-index: 2;
		  width: 158rpx;
		  height: 62rpx;
		  border-radius: 30rpx;
		  border: 2px solid #FFFFFF;
		  color: #FFFFFF;
		  font-size: 28rpx;
		  text-align: center;
		  line-height: 62rpx;
	  }
	  .txt{
		  font-size: 30rpx;
		  font-weight: bold;
	  }
  }
</style>